<template>
  <el-config-provider :locale="form.language" :size="form.size" :button="form">
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item :label="$t('form.language')">
        <el-select v-model="form.language" placeholder="请选择语言" @change="changeLanguage">
          <el-option label="中文" value="zh" />
          <el-option label="English" value="en" />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('form.size')">
        <el-radio-group v-model="form.size">
          <el-radio value="small">small</el-radio>
          <el-radio value="default">default</el-radio>
          <el-radio value="large">large</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="$t('form.autoInsertSpace')">
        <el-switch v-model="form.autoInsertSpace"/>
      </el-form-item>
      <el-form-item :label="$t('form.mode')">
        <el-switch v-model="form.mode" @change="changeMode" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary">{{ $t('form.confirm') }}</el-button>
        <el-button type="success">{{ $t('form.submit') }}</el-button>
      </el-form-item>
    </el-form>

    <ThemeSingle />

    <ThemeMore />

  </el-config-provider>
</template>

<script setup>
import ThemeMore from './ThemeMore.vue'
import ThemeSingle from './ThemeSingle.vue'

import { lang, changeLanguage } from '~locales'

const form = reactive({
  language: lang,
  size: 'default',
  autoInsertSpace: false,
  mode: false
})

const changeMode = (val) => {
  const html = document.getElementsByTagName('html')
  html[0].className = val ? 'dark' : ''
}
</script>
